<template>
  <div class="xtx-checkbox" @click="toogle">
    <i class="iconfont icon-checked" v-if="isChecked"></i>
    <i class="iconfont icon-unchecked" v-else></i>
    <span v-if="$slots.default"><slot></slot></span>
  </div>
</template>
<script>
import { useVModel } from "@vueuse/core";

export default {
  name: "XtxCheckbox",
  props: {
    modelValue: {
      type: Boolean,
    },
  },
  setup(props, { emit }) {
    // 保存复选框状态
    // const isChecked = ref(false);
    const isChecked = useVModel(props, "modelValue", emit);
    const toogle = () => {
      isChecked.value = !isChecked.value;
      // emit("update:modelValue", isChecked.value);
    };
    // 监听外部isChecked值得变化
    // watchEffect(() => {
    //   isChecked.value = props.modelValue;
    // });
    return { isChecked, toogle };
  },
};
</script>
<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>
